const {resolve}=require("path")
const HtmlWebpackPlugin=require("html-webpack-plugin")
module.exports={
    entry: "./src/index.js",
    output: {
        filename: "build.js",
        path: resolve(__dirname,"build")
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "less-loader"
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                //使用url-load需依赖file-load
                loader: "url-loader",
                options: {
                    //当图片低于10k时会打包成base64
                    //优势：减少浏览器访问次数
                    //缺点：体积变大，访问速度变慢
                    limit:10*1024,
                    outputPath: "img",
                    //给图片重命名
                    //[hash:10]去图片hash的前10位
                    //[ext]取文件的原扩展名
                    name:'[hash:10].[ext]',
                    //问题：因为url-loader默认是es6模块化解析，而html-loader使用的是commonjs
                    //解析式会出问题：[Object Module]
                    //解决：关闭url-loader的es6模块化解析
                    esModule:false,
                }
            },
            {
                test: /\.html$/,
                //专门用于处理打包html里的图片的路径的
                loader: "html-loader"
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ],
    mode: "development"
}
